<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/pc_common.css">
    <link rel="stylesheet" href="../inf/font_n5t1ksdn35/iconfont.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/botton.css">
    <link rel="stylesheet" href="../css/Shopping.css">
    <link rel="stylesheet" href="../css/pagination.css">
    <link rel="stylesheet" href="../css/detail.css">



</head>

<body>
    <!-- 头部：高40 -->

    <div class="leadh">

    </div>

    <div class="leads">

    </div>
    <div class="box"></div>

    <!-- 广告 gao383 -->
    <div class="banner-box">
        <div class="banner">
            <img src="../img/detailbanner.jpg" alt="">
            <div class="bannerMsg">
                <h3>所有腕表</h3>
                <p>时尚经典,驾驭各种场合</p>
            </div>
        </div>
    </div>
    <div class="dis-box">
        <div class="dis">
            <p>4月9日起，享满800减80/1600减160/2400减240</p>
        </div>
    </div>

    <div class="shouGoods-box">
        <div class="shouGoods">
            <div class="sort">
                <select name="" id="" class="sort1">
                    <option value="asc" class="asc">升序</option>
                    <option value="desc" class="desc">降序</option>
                </select>
                <select name="" id="" class="type">
                    <option value="goodsId">时间</option>
                    <option value="goodsPrice">价格</option>
                    <option value="id">人气</option>
                    <!-- <option value=""></option> -->
                </select>
                <div class="search">
                    <input type="searchIpt" name="" id="">
                    <span class="searchspan">搜索</span>
                </div>
            </div>

            <ul>
            </ul>
        </div>
    </div>

    <div class="page">
        <div class="pageBox m-style"></div>
    </div>


    <div class="note-box">
        <div class="note">
            <p>Daniel Wellington传承北欧简约设计理念，以无秒针与纤薄表盘诠释设计美学，多种 <a href="">表带</a> 材质可选，随心切换多元化穿搭风格。</p>
        </div>
    </div>




    <div class="leadf">

    </div>

</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/api.js"></script>
<script src="../js/cookie.js"></script>
<script src="../js/jquery.pagination.js"></script>
<script src="../js/hearder.js"></script>


<script>
    $(".leadh").load("../html/hearder.html");
    $(".leadf").load("../html/footer.html");
    $(".leads").load("../html/Shopping.html");
    $(function () {
        // 全局变量 记录默认值 (点击时切换对应的值)
        var key = "";   // 默认搜索所有数据
        var orderCol = "id"; //默认按照学号排序
        var orderType = "asc"; //默认升序
        var pageIndex = 1; // 默认显示第一页
        var showNum = 40;   // 默认每页显示五条


        loadGoods();
        $(".sort1").change(function () {
            orderType = $(".sort1 option:selected").val();
            loadGoods();
        })
        console.log($(".type option:selected").val());
        $(".type").change(function () {
            orderCol = $(".type option:selected").val();
            loadGoods();
        })

        $(".searchspan").click(function () {
            console.log($(this).prev().val());
            key = $(this).prev().val()
            loadGoods();
        })
        function loadGoods() {
            searchGoodsOrderLimit({ key, orderCol, orderType, pageIndex, showNum }).then(res => {


                var { status, detail, count, maxPage, list } = res;
                if (status) {

                    var html = "";
                    $(".pageBox").pagination({
                        // totalData: 0, //数据总条数
                        showData: showNum, //每页显示的条数
                        pageCount: maxPage, //总页数,默认为9
                        current: pageIndex, //当前第几页
                        mode: 'fixed',
                        count: 4,
                        coping: true,
                        homePage: '首页', //首页节点内容
                        endPage: '尾页', //尾页节点内容
                        jump: true, //跳转到指定页数
                        callback: function (api) {
                            pageIndex = api.getCurrent();
                            //console.log(pageIndex)
                            loadGoods()
                        }
                    })
                    list.forEach(({ id, goodsId, goodsName, goodsPrice, bigPicList }) => {

                        html += `  <li>
                        <a href="../html/show.html?gid=${goodsId}">
                        <img src="${bigPicList[0]}" alt="">
                        <p class="newGoods">新品上市</p>
                        <p>${goodsName}</p>
                        <p>
                            <span></span>
                        </p>
                        <p>玫瑰金色</p>
                        <p><span>￥</span><span>${goodsPrice}&nbsp;起</span></p>
                    </a>
                </li>`
                    })

                    $(".shouGoods ul").html(html);

                }

            })
        }
    })
</script>


</html>